<template>
  <el-form ref="search" :model="search"
          label-width="80px">
    <el-row>
      <el-col :span="islabel ? 5 : 3">
        <el-form-item :label="islabel" :label-width="islabel ? '80px' : '0px'">
          <el-select
            v-model="search.type"
            filterable
            clearable
            placeholder="选择关键词"
          >
            <el-option
              v-for="(item, index) in labval"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <slot v-if="isslots" name="slot-content"></slot>
      <el-col v-if="doNotSearch == false" :span="6">
        <el-form-item :label-width="islabel ? '80px' : '0px'">
          <el-input
            v-model="search.keyword"
            placeholder="请输入需要搜索的内容..."
            clearable
            @change="onSubmit"
          />
        </el-form-item>
      </el-col>
      <el-col :span="1">
        <el-form-item label-width="20px">
          <el-button type="primary" @click="onSubmit"> 查询 </el-button>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item class="reset" label-width="45px">
          <el-button type="primary" @click="resetForm('search')"> 重置 </el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item label-width="10px">
        <el-col v-for="(item,index) in add" :key="index" :span="2">
          <el-button type="primary" @click="$emit(`${item.click}`)">
            {{ item.name }}
          </el-button>
        </el-col>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "",
  props: {
    search: Object,
    labval: Array,
    add: Array,
    isslots: Boolean,
    islabel: String,
    doNotSearch: Boolean
  },
  methods: {
    // 提交（传出）
    onSubmit() {
      this.$emit("onSearch");
    },
    // 重置表单（传出）
    resetForm() {
      this.$emit("resetForm");
    }
  },
};
</script>

<style lang='scss'>
.el-row {
   .el-button {
    background-color: #4180b1;
    border-color: #4180b1;
  }
  .reset .el-button {
    background-color: #ff9966;
    border-color: #ff9966;
  }
}
</style>